/**
 * @Date 2023-02-23 11:36:40
 * @Remark
 */

// react
import React, { useEffect, useState } from "react";
// lib
import { Link, useLocation } from "react-router-dom";
import { Menu } from "antd";
// components & widget
// style
// config
import { ROOT_ADMIN_USER_ID, ROUTE_MODE } from "project/config";
// script & methods & public
import logUtils from "utils/logUtils";
// state
import { observer } from "mobx-react";
import { appState, userState } from "state/global";
// controller
import { getMenuTreeFromRoutes } from "routes/logic";
import { getCodeFromPath, getParentCodeFromPath } from "routes/format";
// interface
// 其它

// 获得用户可以访问的菜单
function createUserMenu(menu: AppMenu[], accessList: string[]): AppMenu[] {
  console.log('menutree---------',menu)
  console.log('permissions---------',accessList)
  const list: AppMenu[] = [];
  menu.forEach((el) => {
    const access = accessList.find((item) => item === el.key || item.split(":")[0] === el.key);
    if (access) {
      // const me: AppMenu = {
      //   ...el,
      //   label: access.menuName, // 使用后台的name
      // };
      if (el.children && el.children.length > 0) {
        const sub = createUserMenu(el.children, accessList);
        el.children = sub;
      }
      list.push(el);
    }
  });
  console.log('createdMenuList---------',list)
  return list;
}

// 创建AntD的菜单组件项
function createMenuItems(menu: AppMenu[]) {
  const list: AppMenu[] = [];
  menu.forEach((el) => {
    const it: AppMenu = {
      ...el,
      label:
        el.children && el.children.length > 0 ? (
          el.label // 有子菜单本级菜单无路由
        ) : (
          <Link to={el.url}>{el.label}</Link>
        ),
      icon: el.icon ? <el.icon /> : undefined,
      title: undefined,
      hidden: el.hidden,
    };
    if (el.children && el.children.length > 0) {
      const children = createMenuItems(el.children);
      it.children = children;
    }
    if (!el.hidden) {
      list.push(it);
    }
  });
  console.log("-----------muunulist",list)
  return list;
}

function AdminMenu() {
  // props && state
  const open = appState.getOpen();
  const selected = appState.getSelected();

  const [menu, setMenu] = useState<AppMenu[]>([]);
  const location = useLocation();
  const pathname = location.pathname;

  useEffect(() => {
    const account = userState.getAccount();
    let menuTree = getMenuTreeFromRoutes();

    if (
      ROUTE_MODE === "static" ||
      account.userId.toString() === ROOT_ADMIN_USER_ID
    ) {
      logUtils.info("可访问全部菜单", menuTree);
    }
    if (
      ROUTE_MODE === "dynamic" &&
      account.userId.toString() !== ROOT_ADMIN_USER_ID
    ) {
      const userMenuList = account.permissions;
      logUtils.info("账户菜单权限", userMenuList);
      menuTree = createUserMenu(menuTree, userState.getPermissions());
      logUtils.info("账户可访问菜单", menuTree);
    }

    setMenu(menuTree);
    return () => {
      //
    };
  }, []);
  useEffect(() => {
    // 设置打开
    const upperCode = getParentCodeFromPath(pathname);
    const code = getCodeFromPath(pathname);
    const selected = [upperCode, code].filter((el) => el && el !== ""); // 设置选中
    appState.addOpen(upperCode); // 打开父菜单
    appState.setSelected(selected); // 设置选中
    return () => {
      //
    };
  }, [pathname]);

  const onOpenChange = (openKeys: any) => {
    logUtils.info("Menu Change", openKeys);
    appState.setOpen(openKeys);
  };
  const onClick = (cp: any) => {
    logUtils.info("Menu Click", cp.keyPath);
    appState.setSelected(cp.keyPath);
  };

  return (
    <Menu
      mode="inline"
      theme="dark"
      onOpenChange={onOpenChange}
      onClick={onClick}
      openKeys={open}
      selectedKeys={selected}
      items={createMenuItems(menu)}
    />
  );
}

export default observer(AdminMenu);
